<template>
    <CardStack ref="stack" class="column widget-menu" card-class="card-item"
        @card-drag-out="onDragOut"
        @card-dragging="emit('dragging')"
        @card-drag-start="emit('drag-start')"
        @card-drag-cancel="emit('drag-cancel')"
    >
        <div style="align-self: center">
            将UI拖放到界面上
        </div>
        <div class="grow card-list">
            <div class="card-item" v-for="widget, clsName of WidgetLib" :widget-class="clsName">
                <h3>{{widget.title}}</h3>
            </div>
        </div>
    </CardStack>
</template>

<style scoped>
.card-item {
    height: 55px;
    width: 100%;
    padding: 15px 10px 15px 10px ;
    border-bottom: 1px solid #e8eaec;
    background-color: #fff;
}


.card-item:last-child {
    border-bottom: 0px;
}

</style>

<script lang="ts" setup>
import CardStack from "../../common/CardStack.vue"
import WidgetLib  from "./WidgetLib"

const emit = defineEmits([
    'create-new-widget' ,
    'dragging' ,
    'drag-start' ,
    'drag-cancel' ,
])


function onDragOut($card: any, x: number, y: number) {
    let clsName = $card.attr('widget-class')
    emit("create-new-widget", (WidgetLib as any)[clsName].class , x, y )
}
</script>